<template>
  <div class="menu">
    <div class="menu_title">
      <router-link to="">
        <span>全部商品</span>
        <i class="el-icon-s-unfold"></i>
      </router-link>
    </div>
    <div class="menu_body">
      <div class="row">
        <span>顶级品牌</span>
        <em>/</em>
        <span>百达翡丽</span>
        <span>江诗丹顿</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>奢华品牌</span>
        <em>/</em>
        <span>欧米伽</span>
        <span>拓天马</span>
        <span>万国</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>高级品牌</span>
        <em>/</em>
        <span>浪琴</span>
        <span>爱宝时</span>
        <span>帝舵</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>轻奢时尚</span>
        <em>/</em>
        <span>天梭</span>
        <span>赫柏林</span>
        <span>美度</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>年轻潮牌</span>
        <em>/</em>
        <span>卡西欧</span>
        <span>机械公爵</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>智能手表</span>
        <em>/</em>
        <span>佳明</span>
        <span>华为</span>
        <span>颂拓</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>表带</span>
        <em>/</em>
        <span>万表定制表带</span>
        <span>鼎唐</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="row">
        <span>维修保养</span>
        <em>/</em>
        <span>配件更换</span>
        <span>手表保养</span>
        <div class="menu_brand">
          <div class="brand_left fl">
            <div class="brand">
              <div class="brand_title">品牌</div>
              <div class="brand_body">
                <router-link to="">
                  <div class="brand_logo">
                    <img src="../assets/aa.jpg" alt="" />
                  </div>
                </router-link>
                <router-link to="">
                  <div class="brand_logo">
                    <img src="" alt="" />
                  </div>
                </router-link>
              </div>
            </div>
            <div class="host_word">
              <div class="brand_title">热词</div>
              <router-link to="">
                <div class="words">
                  <span>浪琴</span>
                  <span>百达翡丽</span>
                </div>
              </router-link>
            </div>
          </div>
          <div class="brand_right fr">
            <img src="../assets/brand1.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.menu {
  position: relative;
  width: 202px;
  a {
    text-decoration: none;
  }
  .menu_title {
    height: 48px;
    padding: 0 16px;
    background-image: linear-gradient(269deg, #b34747 1%, #cc5252 98%);
    background-color: #b32424;
    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #fff;
      line-height: 48px;
      i {
        font-size: 20px;
      }
    }
  }
  .menu_body {
    position: relative;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 2px 0 4px 0 rgb(0 0 0 / 10%), -2px 0 4px 0 rgb(0 0 0 / 10%);
    > .row {
      // position: relative;
      width: 197px;
      height: 56.5px;
      margin: 0 0 0 auto;
      line-height: 57px;
      font-size: 12px;
      color: #666;
      border-bottom: 1px solid rgb(226, 223, 223);
      .menu_brand {
        position: absolute;
        top: 0px;
        left: 202px;
        width: 998px;
        height: 464px;
        visibility: hidden;
        background-color: skyblue;
        .brand_left {
          width: 717px;
          height: 404px;
          margin: 23px 28px 0 24px;
          background-color: #fff;
          .brand_title {
            position: relative;
            color: #666;
            height: 15px;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 12px;
            line-height: 15px;
            margin-left: 0;
            padding-left: 8px;
            &:before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 5px;
              height: 15px;
              background-color: #666;
            }
          }
          .brand {
            width: 712px;
            margin-left: 0;
            overflow-y: auto;
            .brand_body {
              display: flex;
              height: 278px;
              background-color: pink;
              .brand_logo {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 139px;
                height: 79px;
                margin: -1px 0 0 -1px;
                border: 1px solid #ccc;
              }
            }
          }
          .host_word {
            .words {
              span {
                display: inline-block;
                height: 36px;
                line-height: 36px;
                padding: 0 18px;
                border: 1px solid #eee;
                border-radius: 100px;
                font-size: 14px;
                color: #666;
                &:hover {
                  color: #fff;
                  background-color: #ccaa7c;
                }
              }
            }
          }
        }
        .brand_right {
          width: 205px;
          height: 412px;
          margin-top: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      span {
        margin-right: 4px;
      }
      em {
        margin-right: 5px;
      }
      & > :nth-child(1) {
        font-weight: 700;
        color: #4d4d4d;
        margin-left: 5px;
      }
      &::before {
        content: "";
        position: absolute;
        margin-left: -5px;
        width: 5px;
        height: 57px;
        background-color: #ccaa7a;
        visibility: hidden;
      }
      &:hover {
        background-color: #fff;
      }
      &:hover:before {
        visibility: visible;
      }
      &:hover .menu_brand {
        visibility: visible;
      }
    }
  }
}
</style>
